<template>
	<div class="menu">
		<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="40%">
			<el-form :model="menuform" :rules="rules" ref="menuform" label-width="100px" class="demo-ruleForm">
				<el-form-item label="上级菜单" prop="parentId"><el-input v-model="menuform.parentId"></el-input></el-form-item>
				<el-form-item label="菜单名称" prop="menuName"><el-input v-model="menuform.menuName"></el-input></el-form-item>
				<el-form-item label="图标" prop="icon"><el-input prefix-icon="el-icon-search" v-model="menuform.icon"></el-input></el-form-item>
				<el-form-item label="组件路径" prop="component"><el-input v-model="menuform.component"></el-input></el-form-item>
				<el-form-item label="排序" prop="sort"><el-input-number v-model="menuform.sort" :min="0" :max="100" label="排序"></el-input-number></el-form-item>
				<el-form-item label="是否锁定" prop="isLocked"><el-switch v-model="menuform.isLocked"></el-switch></el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('menuform')">确定</el-button>
					<el-button @click="resetForm('menuform')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card class="box-card">
					<div class="boxcard-head">
						<el-form :inline="true" class="demo-form-inline">
							<el-form-item label="菜单名称:"><el-input placeholder="菜单名称"></el-input></el-form-item>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" @click="searchMenu">查询</el-button>
								<el-button type="primary" icon="el-icon-plus" @click="addMenu">添加</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div class="boxcard-body">
						<el-table :data="tabledata" style="width: 100%;" row-key="appId"
							:header-cell-style="{ 'background-color': '#EEEEEE' }"
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
							<el-table-column prop="menuName" label="菜单名称"></el-table-column>
							<el-table-column prop="component" label="组件路径"></el-table-column>
							<el-table-column label="图标">
								<template slot-scope="scope">
									<i :class="scope.row.icon"></i>
								</template>
							</el-table-column>
							<el-table-column prop="sort" label="排序"></el-table-column>
							<el-table-column prop="isLocked" label="是否锁定">
								<template slot-scope="scope">
									{{ scope.row.isLocked ? '锁定' : '未锁定' }}
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button type="warning" size="small" @click="updateMenu(scope.row)">修改</el-button>
									<el-button type="danger" size="small" @click="deleteMenu(scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dialog: {
				title: '添加菜单',
				visible: false
			},
			menuform: {
				appId: '',
				menuName: '',
				menuUrl: '',
				component: '',
				icon: '',
				parentId: '',
				sort: 0,
				isLocked: false
			},
			rules: {
				appId: [],
				menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }, { min: 3, max: 10, trigger: 'change' }],
				menuUrl: [],
				component: [],
				icon: [],
				parentId: [],
				sort: [{ required: true, message: '请输入顺序', trigger: 'blur' }],
				isLocked: []
			},
			tabledata: [
				{
					appId: '1',
					menuName: '系统管理',
					menuUrl: '',
					component: '',
					icon: 'el-icon-platform-eleme',
					parentId: '',
					sort: 1,
					isLocked: false,
					children: [
						{
							appId: '1-1',
							menuName: '公司管理',
							menuUrl: '',
							component: '/company',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 1,
							isLocked: false
						},
						{
							appId: '1-2',
							menuName: '门店管理',
							menuUrl: '',
							component: '/store',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 2,
							isLocked: false
						},
						{
							appId: '1-3',
							menuName: '配置管理',
							menuUrl: '',
							component: '/company',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 3,
							isLocked: false
						},
						{
							appId: '1-4',
							menuName: '选项管理',
							menuUrl: '',
							component: '/store',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 4,
							isLocked: false
						}
					]
				},
				{
					appId: '2',
					menuName: '权限管理',
					menuUrl: '',
					component: '',
					icon: 'el-icon-platform-eleme',
					parentId: '',
					sort: 2,
					isLocked: false,
					children: [
						{
							appId: '2-1',
							menuName: '用户管理',
							menuUrl: '',
							component: '/company',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 1,
							isLocked: false
						},
						{
							appId: '2-2',
							menuName: '应用管理',
							menuUrl: '',
							component: '/store',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 2,
							isLocked: false
						},
						{
							appId: '2-3',
							menuName: '菜单管理',
							menuUrl: '',
							component: '/company',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 3,
							isLocked: false
						},
						{
							appId: '2-4',
							menuName: '角色管理',
							menuUrl: '',
							component: '/store',
							icon: 'el-icon-platform-eleme',
							parentId: '',
							sort: 4,
							isLocked: false
						}
					]
				}
			]
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					return true;
				} else {
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		addMenu() {
			this.dialog = { title: '添加菜单', visible: true };
		},
		searchMenu() {},
		updateMenu(row) {
			this.dialog = { title: '修改菜单', visible: true };
		},
		deleteMenu(row) {
			this.$alert('是否删除？', '删除提示', {
				confirmButtonText: '确定',
				callback: action => {
					this.$message({
						type: 'info',
						message: '删除成功！'
					});
				}
			});
		}
	}
};
</script>
<style lang="less">
	
</style>
